<!DOCTYPE html>
<html lang="en">

<head>
  <title>Vis Network | Basic usage</title>

  <script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

  <style type="text/css">
    #mynetwork {
      width: 1000px;
      height: 1000px;
      border: 1px solid;
    }
  </style>
</head>

<body>
  <p>Create a simple network with some nodes and edges.</p>

  <div id="mynetwork"></div>

  <script type="text/javascript">
    // provide data in the DOT language
    const url = 'example.dot'
    var xhr = new XMLHttpRequest();
    xhr.onloadend = function () {
      var DOTstring = xhr.responseText;
      var parsedData = vis.parseDOTNetwork(DOTstring);

      var data = {
        nodes: parsedData.nodes,
        edges: parsedData.edges
      }

      var options = {
        layout: {
          randomSeed: undefined,
          improvedLayout: false,
          clusterThreshold: 150,
          hierarchical: {
            enabled: false,
            levelSeparation: 150,
            nodeSpacing: 100,
            treeSpacing: 200,
            blockShifting: true,
            edgeMinimization: true,
            parentCentralization: true,
            direction: 'DU',        // UD, DU, LR, RL
            sortMethod: 'hubsize',  // hubsize, directed
            shakeTowards: 'leaves'  // roots, leaves
          }
        },
      }
      //var options = parsedData.options;

      // you can extend the options like a normal JSON variable:
      var container = document.getElementById("mynetwork");
      // create a network
      var network = new vis.Network(container, data, options);
    };
    xhr.open("get", url);
    xhr.send(null)
  </script>
</body>

</html>